body {
  /* Default values */
  --tk-custom-colours-negative: #d55e00;
  --tk-custom-colours-positive: #009e73;
  --tk-custom-colours-warning: #797dec;

  // Default theme
  &.tk-custom-colours-enabled {
    /*
    Each accent colour is defined by scaling the base colour in the LCH colour space
    The accent variables are named --tk-custom-colours-{base}-l{% lightness}c{% chroma}
    e.g. l100c100 is equivalent to the base colour, l150c100 would be 50% brighter,
         l100c050 would be the same brightness, but 50% as saturated
    
    themer.html in this folder is a tool that can be used to convert CSS rules from
    the YNAB stylesheet automatically into accent variables

    To build the themes copy the base colours below into the themer along with YNAB
    CSS rules - then standardise the LC colours across the positive/negative/warning
    rules - some manual tweaking will be required

    If a new accent variable is referenced it needs to be added to the
    TK_CUSTOMIZE_COLOUR_ACCENTS at the top of index.js to be defined and updated

    Base colours:
    Positive: #67c122
    Warning: #e0a41a
    Negative: #c72c1e
  */

    /* Negative */
    --calloutNegativeAccent: var(--tk-custom-colours-negative-l100c100) !important;
    --calloutNegativeButtonBackground: var(--tk-custom-colours-negative-l100c100) !important;
    --calloutNegativeButtonBackgroundActive: var(--tk-custom-colours-negative-l075c080) !important;
    --calloutNegativeButtonForeground: var(--tk-custom-colours-negative-l215c010) !important;
    --calloutNegativeLabel: var(--tk-custom-colours-negative-l025c035) !important;
    --calloutNegativeProminentBackground: var(--tk-custom-colours-negative-l175c040) !important;
    --calloutNegativeProminentBackgroundEmphasis: var(
      --tk-custom-colours-negative-l150c070
    ) !important;
    --calloutNegativeSubtleBackground: var(--tk-custom-colours-negative-l215c010) !important;
    --calloutNegativeSubtleBackgroundEmphasis: var(
      --tk-custom-colours-negative-l175c040
    ) !important;
    --categoryBalanceAlternateNegativeBackground: var(
      --tk-custom-colours-negative-l100c100
    ) !important;
    --categoryBalanceAlternateNegativeBackgroundActive: var(
      --tk-custom-colours-negative-l075c080
    ) !important;
    --categoryBalanceAlternateNegativeLabel: var(--tk-custom-colours-negative-l215c010) !important;
    --categoryBalanceNegativeBackground: var(--tk-custom-colours-negative-l175c040) !important;
    --categoryBalanceNegativeBackgroundActive: var(
      --tk-custom-colours-negative-l150c070
    ) !important;
    --categoryBalanceNegativeLabel: var(--tk-custom-colours-negative-l025c035) !important;
    --labelNegative: var(--tk-custom-colours-negative-l100c100) !important;
    --labelNegativeActive: var(--tk-custom-colours-negative-l075c080) !important;
    --labelNegativeDisabled: var(--tk-custom-colours-negative-l200c020) !important;
    --statusNegative: var(--tk-custom-colours-negative-l100c100) !important;

    /* Positive */
    --calloutPositiveAccent: var(--tk-custom-colours-positive-l100c100) !important;
    --calloutPositiveButtonBackground: var(--tk-custom-colours-positive-l075c080) !important;
    --calloutPositiveButtonBackgroundActive: var(--tk-custom-colours-positive-l050c060) !important;
    --calloutPositiveButtonForeground: var(--tk-custom-colours-positive-l140c010) !important;
    --calloutPositiveLabel: var(--tk-custom-colours-positive-l025c030) !important;
    --calloutPositiveProminentBackground: var(--tk-custom-colours-positive-l125c055) !important;
    --calloutPositiveProminentbackgroundEmphasis: var(
      --tk-custom-colours-positive-l115c100
    ) !important;
    --calloutPositiveSubtleBackground: var(--tk-custom-colours-positive-l140c010) !important;
    --calloutPositiveSubtleBackgroundEmphasis: var(
      --tk-custom-colours-positive-l125c055
    ) !important;
    --categoryBalancePositiveBackground: var(--tk-custom-colours-positive-l125c055) !important;
    --categoryBalancePositiveBackgroundActive: var(
      --tk-custom-colours-positive-l120c080
    ) !important;
    --categoryBalancePositiveLabel: var(--tk-custom-colours-positive-l025c030) !important;
    --labelPositive: var(--tk-custom-colours-positive-l075c080) !important;
    --labelPositiveActive: var(--tk-custom-colours-positive-l050c060) !important;
    --loanChartsPositive: var(--tk-custom-colours-positive-l115c100) !important;
    --statusPositive: var(--tk-custom-colours-positive-l100c100) !important;

    /* Warning */
    --calloutWarningAccent: var(--tk-custom-colours-warning-l190c165) !important;
    --calloutWarningButtonBackground: var(--tk-custom-colours-warning-l220c175) !important;
    --calloutWarningButtonForeground: var(--tk-custom-colours-warning-l050c055) !important;
    --calloutWarningProminentBackground: var(--tk-custom-colours-warning-l240c100) !important;
    --calloutWarningProminentBackgroundEmphasis: var(
      --tk-custom-colours-warning-l190c165
    ) !important;
    --calloutWarningProminentBackgroundLabel: var(--tk-custom-colours-warning-l050c055) !important;
    --calloutWarningSubtleBackground: var(--tk-custom-colours-warning-l260c015) !important;
    --calloutWarningSubtleBackgroundEmphasis: var(--tk-custom-colours-warning-l240c100) !important;
    --calloutWarningSubtleBackgroundLabel: var(--tk-custom-colours-warning-l050c055) !important;
    --categoryBalanceAlternateWarningBackground: var(
      --tk-custom-colours-warning-l220c175
    ) !important;
    --categoryBalanceAlternateWarningBackgroundActive: var(
      --tk-custom-colours-warning-l190c165
    ) !important;
    --categoryBalanceWarningBackground: var(--tk-custom-colours-warning-l230c145) !important;
    --categoryBalanceWarningBackgroundActive: var(--tk-custom-colours-warning-l220c175) !important;
    --categoryBalanceWarningLabel: var(--tk-custom-colours-warning-l050c055) !important;
    --labelWarning: var(--tk-custom-colours-warning-l100c100) !important;
    --loanChartsWarning: var(--tk-custom-colours-warning-l220c175) !important;
    --statusWarning: var(--tk-custom-colours-warning-l220c175) !important;
    --viewsWarningBackground: var(--tk-custom-colours-warning-l240c100) !important;
    --viewsWarningBackgroundHover: var(--tk-custom-colours-warning-l230c145) !important;
    --viewsWarningBackgroundSelected: var(--tk-custom-colours-warning-l250c050) !important;
    --viewsWarningBackgroundSelectedHover: var(--tk-custom-colours-warning-l240c100) !important;
    --viewsWarningLabel: var(--tk-custom-colours-warning-l050c055) !important;
    --viewsWarningLabelSelected: var(--tk-custom-colours-warning-l050c055) !important;
    --viewsWarningSelectedAccent: var(--tk-custom-colours-warning-l190c165) !important;
  }

  // Square corners
  &.tk-custom-colours-enabled[tk-custom-colours-negative-square] {
    .ynab-new-budget-available-number.negative {
      border-radius: 0em !important;
      -webkit-border-radius: 0em !important;
    }

    .left-to-budget-is-negative .to-be-budgeted {
      border-radius: 0em !important;
      -webkit-border-radius: 0em !important;
    }
  }

  &.tk-custom-colours-enabled[tk-custom-colours-positive-square] {
    .ynab-new-budget-available-number.positive {
      border-radius: 0em !important;
      -webkit-border-radius: 0em !important;
    }

    .left-to-budget-is-positive .to-be-budgeted {
      border-radius: 0em !important;
      -webkit-border-radius: 0em !important;
    }
  }

  &.tk-custom-colours-enabled[tk-custom-colours-warning-square] {
    .ynab-new-budget-available-number.cautious {
      border-radius: 0em !important;
      -webkit-border-radius: 0em !important;
    }
  }
}

.tk-custom-colours-grid {
  display: none !important;
}

body.tk-custom-colours-enabled .tk-custom-colours-grid {
  display: grid !important;
}

// Options menu
.tk-custom-colours-option {
  input[type='checkbox'] {
    width: auto;
    border: var(--backgroundTertiary);
    height: unset;
    margin: 0;
  }

  .tk-custom-colours-option-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;

    h3 {
      width: auto !important;
      margin-bottom: 0;
    }
  }

  .tk-custom-colours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem 1rem;

    .tk-custom-colours-square-option {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
    }
  }

  .tk-custom-colours-positive,
  .tk-custom-colours-warning,
  .tk-custom-colours-negative {
    position: relative;
    border-color: var(--separatorStandard);
    border-radius: 0.5rem;
    border-width: 0.125rem;
    border-style: solid;
    text-align: center;
    overflow: hidden;
  }

  .tk-custom-colours-picker {
    width: 100%;
    height: 100px;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
    cursor: pointer;
  }

  .tk-custom-colours-picker-icon {
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M92 8c-5-4-12-4-17 0L62 22l-4-4a5 5 0 10-7 7l4 4-42 41c-2 2-3 5-3 8a81 81 0 01-1 6l-3 3v4l3 3h4l3-3h1l5-1c3 0 6-1 8-3l41-42 4 4a5 5 0 107-7L70 29l9 8 13-12c4-5 4-12 0-17zM65 43L45 63h-4l-3-3h-4l-1 1-14 14h-1v-1l24-23 15-16h4l4 4v4z"/></svg>');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .tk-custom-colours-picker-reset {
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.3 55.6"><path d="M54.3 0l-9 7.3a27.4 27.4 0 10-17.7 48.3c11.8 0 22-7.4 25.9-18l-10-2.4a17.3 17.3 0 01-16 10.6c-9.7 0-17.4-7.7-17.4-17.5 0-9.7 7.7-17.7 17.5-17.7 3.6 0 6.9 1.1 9.6 3l-9 7.2 26.1 4.9V0z"/></svg>');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    position: absolute;
    top: 16px;
    left: 16px;
  }

  .tk-custom-colours-square div {
    width: 219px;
    text-align: center;
    padding-bottom: 0.5em;
  }

  .tk-custom-colours-square {
    input {
      margin: 0 0.3em 0 0;
    }

    input,
    label {
      width: auto;
      display: inline;
      font-weight: normal;
    }
  }
}
